<%--
  Created by IntelliJ IDEA.
  User: yingzi
  Date: 2017-6-18
  Time: 15:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="/static/commonviews/header.jsp"/>
    <link type="text/css" rel="stylesheet" href="video/css/jplayer.blue.monday.css"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div id="jp_container_1" style="margin-top: 20px;" class="jp-video jp-video-360p" role="application" aria-label="media player">
                    <div class="jp-type-single">
                        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                        <div class="jp-gui">
                            <div class="jp-video-play">
                                <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
                            </div>
                            <div class="jp-interface">
                                <div class="jp-progress">
                                    <div class="jp-seek-bar">
                                        <div class="jp-play-bar"></div>
                                    </div>
                                </div>
                                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                                <div class="jp-controls-holder">
                                    <div class="jp-controls">
                                        <button class="jp-play" role="button" tabindex="0">play</button>
                                        <button class="jp-stop" role="button" tabindex="0">stop</button>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" role="button" tabindex="0">mute</button>
                                        <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value"></div>
                                        </div>
                                    </div>
                                    <div class="jp-toggles">
                                        <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                                        <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                                    </div>
                                </div>
                                <div class="jp-details">
                                    <div class="jp-title" aria-label="title">&nbsp;</div>
                                </div>
                            </div>
                        </div>
                        <%--<div class="jp-playlist" style="margin-top: 20px;">
                            <ul>
                                <li>&nbsp;</li>
                            </ul>
                        </div>--%>
                        <div class="jp-no-solution">
                            <span>Update Required</span>
                            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                        </div>
                    </div>
                </div>
            </div>
            <!--视频列表-->
            <div class="col-md-4">
                <div id="divList" class="jp-playlist" style="margin-top: 20px;">
                    <ul>
                        <li><a href="#">视频1</a></li>
                        <li><a href="#">视频2</a></li>
                        <li><a href="#">视频3</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="<%=request.getContextPath()%>/static/jquery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="video/js/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="video/js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
    $(function () {
        //单个视频
        /*$("#jquery_jplayer_1").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    title: "测试视频",
                    m4v:"video/file/Bootstrap组件.mp4"
                });
            },
            swfPath: "video/file",
            solution: "flash, html",
            supplied: "m4v",
            size: {
                width: "640px",
                height: "360px",
                cssClass: "jp-video-360p"
            },
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,
            remainingDuration: true,
            toggleDuration: true
        });*/
        //视频列表
        var myPlaylist=new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"Bootstrap组件",
                artist:"哈哈哈",
                free:true,
                m4v:"video/file/Bootstrap组件.mp4"
            },
            {
                title:"Bootstrap组件2",
                artist:"呵呵呵",
                m4v:"video/file/Bootstrap组件.mp4"
            }
        ], {
            swfPath: "video/file",
            supplied: "m4v",
            size: {
                width: "640px",
                height: "360px",
                cssClass: "jp-video-360p"
            },
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true
        });


        $("#divList ul li a").click(function(data) {
            myPlaylist.select(0);
            myPlaylist.play(0);
        });
    });
</script>
</body>
</html>
